<template>
<div>
    <van-search v-model="searchValue" placeholder="请输入搜索关键词" />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in bannerData" :key="item.id">
          <img :src="item.picUrl" alt="">
        </van-swipe-item>
        
    </van-swipe>
</div>
</template>
<script>

import axios from 'axios'
export default {
   data() {
    return {
      searchValue: '好想爱这个世界呀',
      bannerData:[]
    };
  },
  created(){
    this.getBanner()
  },
  methods:{
  getBanner(){
    axios.get("/api/recommend/banner")
    .then(res => {
      console.log(res.data.data)
      this.bannerData = res.data.data
    })
    .catch(err => {
      console.error(err); 
    })
  }
}
}
</script>
<style scoped>
     .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
   .my-swipe .van-swipe-item img {
    width: 90%;
    border-radius:20px ;
  }
</style>




<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

